﻿@page "/utilities/cursor"

<DocsPage>
    <DocsPageHeader Title="Cursor" SubTitle="Specifies the cursor style to be used when hovering over an element." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Class Reference" HideTitle="true" />
            <DocsAutoGen_Interactivity_Cursor/>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Basic Usage">
                <Description>
                    With the cursor utilities you can control which cursor is displayed when hovering over the element.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(CursorExample)" HighLight="cursor-progress,cursor-not-allowed">
                <CursorExample/>
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Interactive Example">
                <Description>
                    Choose  a cursor and hover your mouse over the paper.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(CursorInteractiveExample)" Block="true">
                <CursorInteractiveExample/>
            </SectionContent>
        </DocsPageSection>
        
        
    </DocsPageContent>
</DocsPage>